<template>
	<view class="container">
		<view class="search" v-show="isShowSearch">
			<view class="head">
				<view class="top flex-row">
					<view>隐患数:{{ count.all_num }}</view>
					<view>已整改:{{ count.done_num }}</view>
					<view class="error">未整改:{{ count.notDone_num  }}</view>
					<view>整改率:{{ count.done_rate  }}%</view>
					<view>{{ monthTxt }}</view>
				</view>
				<view class="bottom flex-row">
					<view class="success">按期改:{{ count.do_intime }}</view>
					<view class="success">按期率:{{ count.do_intime_rate }}%</view>
					<view class="error">超期改:{{ count.do_outtime }}</view>
					<view class="error">超期率:{{ count.do_outtime_rate }}%</view>
					<view>
						<picker @change="changeMonth" :value="month" :range="months" mode="multiSelector">
							<uni-icons type="arrowdown" size="20"></uni-icons>
						</picker>
					</view>
				</view>
			</view>
			<view class="body">
				<view class="row flex-row">
					<view class="label">整改状态：</view>
					<view class="tag" @click="toggleStatus(1)" :class="{active: search.done_status == 1}">未整改</view>
					<view class="tag" @click="toggleStatus(3)" :class="{active: search.done_status == 3}">未验收</view>
					<view class="tag" @click="toggleStatus(4)" :class="{active: search.done_status == 4}">已验收</view>
				</view>
				<view class="row flex-row">
					<view class="label">日期区间：</view>
					<view class="tag" @click="toggleTimeType('all')" :class="{active: search.time_type == 'all'}">全部</view>
					<view class="tag" @click="toggleTimeType('week')" :class="{active: search.time_type == 'week'}">近一周</view>
					<view class="tag" @click="toggleTimeType('month')" :class="{active: search.time_type == 'month'}">近一月</view>
				</view>
				<view class="row flex-row">
					<view class="label">隐患来源：</view>
					<view class="tag" @click="toggleDangerType('all')" :class="{active: search.danger_type == 'all'}">全部</view>
					<view class="tag" @click="toggleDangerType('myFind')" :class="{active: search.danger_type == 'myFind'}">我发现</view>
					<view class="tag" @click="toggleDangerType('myDone')" :class="{active: search.danger_type == 'myDone'}">我整改</view>
				</view>
				<view class="row flex-row">
					<view class="label">隐患等级：</view>
					<view class="tag" @click="toggleDangerStatus(0)" :class="{active: search.danger_status == 0}">全部</view>
					<view class="tag" @click="toggleDangerStatus(1)" :class="{active: search.danger_status == 1}">一般隐患</view>
					<view class="tag" @click="toggleDangerStatus(2)" :class="{active: search.danger_status == 2}">重大隐患</view>
				</view>
				<view class="row flex-row">
					<view class="label">公司部门：</view>
					<view class="tag dept">
						<picker @change="selectDept" :value="search.deptid" :range="depts" range-key="name">
							<text>{{ depts[search.deptid] ? depts[search.deptid].name : '' }}</text>
						</picker>
					</view>
					<view class="tag" @click="toggleSearch(false)" style="width: 100upx;">
						<uni-icons type="arrowup" size="20"></uni-icons>
						<text>收起</text>
					</view>
				</view>
			</view>
		</view>
		<view class="search" v-show="!isShowSearch">
			<view class="body">
				<view class="row flex-row">
					<view class="label">公司部门：</view>
					<view class="tag" style="width: calc(100% - 240upx);text-align: left;">选择部门</view>
					<view class="tag" @click="toggleSearch(true)" style="width: 100upx;">
						<uni-icons type="arrowdown" size="20"></uni-icons>
						<text>展开</text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view v-if="risks.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll" lower-threshold="120" :style="{height: isShowSearch ? 'calc(100vh - 237px - 20px)' : 'calc(100vh - 51px)'}">
			<view class="item" v-for="(item, index) in risks" :key="index">
				<view class="top flex-row font28">
					<view class="left">
						<view v-if="item.done_status == 1" class="error">风险名称：{{ item.title }}</view>
						<view v-else-if="item.done_status == 3" class="success">风险名称：{{ item.title }}</view>
						<view v-else-if="item.done_status == 4">风险名称：{{ item.title }}</view>
						<view>整改责任人：{{ item.username || '未设定' }}</view>
						<view>发现时间：{{ item.addtime }}</view>
						<view>整改期限：{{ item.limit_time || '未设定' }}</view>
					</view>
					<view v-if="item.done_status == 1" class="right flex-column">
						<image src="../../static/fengxianxuncha/unRedo.jpg" mode=""></image>
						<text class="error">未整改</text>
					</view>
					<view v-else-if="item.done_status == 3" class="right flex-column">
						<image src="../../static/fengxianxuncha/unReceived.jpg" mode=""></image>
						<text class="success">待验收</text>
					</view>
					<view v-else-if="item.done_status == 4" class="right flex-column">
						<image src="../../static/fengxianxuncha/hasReceived.jpg" mode=""></image>
						<text>已验收</text>
					</view>
				</view>
				<view class="bottom flex-row font28">
					<view class="left error">{{ item.danger_status > 1 ? '重大隐患' : '一般隐患' }}</view>
					<view class="right">
						<view @click="toDetail(item.sspid)" v-if="item.done_status == 1" class="btn error">查看详情</view>
						<view @click="toDetail(item.sspid)" v-else-if="item.done_status == 3" class="btn success">查看报告</view>
						<view @click="toDetail(item.sspid)" v-else-if="item.done_status == 4" class="btn">查看详情</view>
					</view>
				</view>
			</view>
			<view class="nodata">没有更多了~</view>
		</scroll-view>
		<view v-else class="nodata">没有更多了~</view>
	</view>
</template>

<script>
import uniIcons from '../../components/uni-icons/uni-icons.vue';
export default{
	components: { uniIcons },
	data(){
		return {
			isShowSearch: true,
			month: [1, 0],
			monthTxt: '',
			monthSearch: '',
			months: [
				['去年', '今年'],
				['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','一季','二季','三季','四季','全年']
			],
			count: {
				done_num: 0,
				do_outtime: 0,
				do_intime: 0,
				all_num: 0,
				notDone_num: 0,
				done_rate: 0,
				do_intime_rate: 0,
				do_outtime_rate: 0
			},
			search: {
				userid: uni.getStorageSync('userid'),
				done_status: 1,
				time_type: 'all',
				danger_type: 'all',
				danger_status: 0,
				deptid: 0,
				page: 1,
				rows: 10
			},
			risks: [],
			riskMaxPage: 1,
			depts: [],
			deptName: '选择部门'
		}
	},
	onShow() {
		// 获取当前月份
		let oDate = new Date();
		let year = oDate.getFullYear();
		let month = oDate.getMonth()+1;
		this.month = [1, month-1];
		this.monthTxt = `${month}月`;
		this.monthSearch = `m_${year}${month < 10 ? '0'+month : month}`;
		
		//console.log(uni.getStorageSync('company'))
		// 获取数据列表
		this.getTopCount();
		this.getDangerRisk();
		this.getDeptList();
	},
	onLoad() {
		// #ifdef APP-PLUS
		/* 隐藏凸起图标 */
		var icon = plus.nativeObj.View.getViewById("icon");
		setTimeout(function() {
			if(icon){icon.hide();}
		}, 100);
		// #endif
	},
	methods: {
		// 详情
		toDetail(id){
			uni.navigateTo({
				url: 'dangerHandleDetail?id='+id
			})
		},
		// 检索条件切换
		toggleSearch(bool){
			this.isShowSearch = bool;
		},
		// 切换整改状态
		toggleStatus(status){
			this.search.page = 1;
			this.search.done_status = status;
			this.getDangerRisk();
		},
		// 切换日期区间
		toggleTimeType(type){
			this.search.time_type = type;
			this.getDangerRisk();
		},
		// 切换隐患来源
		toggleDangerType(type){
			this.search.danger_type = type;
			this.getDangerRisk();
		},
		// 切换隐患等级
		toggleDangerStatus(level){
			this.search.danger_status = level;
			this.getDangerRisk();
		},
		// 选择部门
		selectDept(e){
			this.search.deptid = e.target.value;
			this.getDangerRisk();
		},
		// 选择日期
		changeMonth(e){
			let [selectedYearIndex, selectedMonthIndex] = e.detail.value;
			this.monthTxt = this.months[1][selectedMonthIndex];
			
			// 判断年份的选择
			let selectedYear = new Date().getFullYear();
			if(selectedYearIndex == 0) selectedYear--;
			
			// 判断月份选择的区间
			if(selectedMonthIndex < 9){
				this.monthSearch = `m_${selectedYear}0${selectedMonthIndex+1}`;
			}else if(selectedMonthIndex >= 9 && selectedMonthIndex <= 11){
				this.monthSearch = `m_${selectedYear}${selectedMonthIndex+1}`;
			}else if(selectedMonthIndex > 11 && selectedMonthIndex <= 15){
				this.monthSearch = `q_${selectedYear}${selectedMonthIndex - 11}`;
			}else{
				this.monthSearch = `year_${selectedYear}`;
			}
			
			this.getTopCount();
		},
		// 分页加载
		getNextPageData(){
			this.search.page++;
			this.getDangerRisk();
		},
		// 获取隐患风险列表
		getDangerRisk(){
			let _this = this;
			
			// 判断是否超过最大页码
			if(_this.search.page >1 && _this.search.page >= _this.riskMaxPage) return;
			
			uni.request({
				method: 'GET',
				url: _this.$API.dangerRiskList,
				data: _this.search,
				header: _this.$API.get_head(),
				success: (res)=>{
					console.log(res)
					let data = res.data.data.rows;
					_this.riskMaxPage = res.data.data.total;
					_this.risks = _this.search.page == 1 ? data : _this.risks.concat(data);
				}
			})
		},
		// 获取顶部统计数据
		getTopCount(){
			let _this = this;
			uni.request({
				method: 'GET',
				url: _this.$API.dangerTopCount,
				data: {
					month: _this.monthSearch,
					userid: uni.getStorageSync('userid')
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					let count = res.data.data;					
					count.done_rate = count.all_num ? Number.parseInt(count.done_num *100/ count.all_num) : 0;
					count.do_intime_rate = count.all_num ? Number.parseInt(count.do_intime *100/ count.all_num) : 0;
					count.do_outtime_rate = count.all_num ? Number.parseInt(count.do_outtime *100/ count.all_num) : 0;
					_this.count = count
					
				}
			})
		},
		// 获取部门列表
		getDeptList(){
			let _this = this;
			uni.getStorage({
				key: 'company',
				success: function (companyRes){
					uni.request({
						url: _this.$API.deptList,
						method: "GET",
						data: {company: companyRes.data},
						header: _this.$API.get_head(),
						success: (res) => {
							let tmpDepts = res.data.data.map(item=>{
								item.name = item.fullname;
								return item;
							})
							tmpDepts.unshift({id: 0, name: '选择部门'});
							_this.depts = tmpDepts;
						},
						fail: () => {
							uni.showToast({
								title: "加载失败",
								icon: 'none'
							})
						}
					})
				}
			})
		},
	}
}
</script>

<style scoped>
.flex-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex-column{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.nodata{
	color: #999;
	text-align: center;
	padding: 40upx;
	font-size: 28upx;
}
.error{
	color: red;
}
.success{
	color: green;
}
.container{
	height: 100vh;
	padding: 20upx;
	background: #F2F2F2;
	box-sizing: border-box;
}

.scroll .item{
	margin-top: 20upx;
}
.scroll .item .top .left view:first-child{
	padding-left: 20upx;
	color: #000 !important;
	position: relative;
}
.scroll .item .top .left view:first-child::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #1890DE;
	position: absolute;
	top: 12upx;
	left: 0;
}
.scroll .item .top .left view.error::before{
	background: red;
}
.scroll .item .top .left view.success::before{
	background: green;
}
.scroll .item .top .right image{
	width: 100upx;
	height: 120upx;
}
.scroll .item .top .right text{
	color: #2D88D9;
	font-weight: bold;
}
.scroll .item .top .right text.success{
	color: green;
}
.scroll .item .top .right text.error{
	color: red;
}
.scroll .item .bottom .right .btn{
	color: #fff;
	font-size: 24upx;
	background: #2D88D9;
	border-radius: 10upx;
	padding: 4upx 12upx;
}
.scroll .item .bottom .right .btn.error{
	background: red;
}
.scroll .item .bottom .right .btn.success{
	background: green;
}

.scroll .item,
.search .body,
.search .head{
	padding: 20upx;
	background: #fff;
	border-radius: 10upx;
	box-sizing: border-box;
	border: 2upx solid #dedede;
}
.search .body .row view{
	margin: 6upx 0;
	font-size: 26upx;
	text-align: center;
	width: calc((100% - 140upx) / 3);
}
.search .body .row .label{
	width: 140upx;
	font-weight: bold;
}
.search .body .row .tag.active{
	color: #fff;
	background: #1890DE;
	border-radius: 40upx;
}
.search .body .row .tag.dept{
	width: calc(100% - 240upx);
	text-align: left !important;
}

.search .head{
	height: 120upx;
	margin-bottom: 20upx;
}
.search .head .top view,
.search .head .bottom view{
	width: calc(90% / 4);
	font-size: 24upx;
}
.search .head .top view:last-child,
.search .head .bottom view:last-child{
	width: 10%;
	text-align: right;
}
.font28 view{
	font-size:28upx !important;
}
.font28 text{
	font-size:28upx !important;
}
</style>
